<template>
  <el-dialog width="66%" :title="dialogTitle" v-model="dialogVisible" modal draggable @close="closeDialog"
    :close-on-click-modal="false">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="接口信息" name="info">
        <el-form class="dialog-form" :model="formData" ref="vForm" label-position="right" label-width="150px"
          size="medium" @submit.native.prevent :rules="formRules" :disabled="formDisabled">
          <el-row>
            <el-col :span="12">
              <el-form-item label="接口编码" prop="interfaceCode">
                <el-input v-model="formData.interfaceCode" placeholder="请输入接口编码" link show-word-limit clearable
                  disabled>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接口名称" prop="interfaceName">
                <el-input v-model="formData.interfaceName" placeholder="请输入接口名称" link show-word-limit clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="HTTP协议类型" prop="httpType">
                <el-select v-model="formData.httpType" placeholder="请选择HTTP协议类型" class="full-width-input" clearable>
                  <el-option v-for="(item, index) in httpTypeOptions" :key="index" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="版本" prop="version">
                <el-input v-model="formData.version" placeholder="请输入版本号" link show-word-limit
                  :disabled="type === 'edit'" clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="第三方接口地址" prop="httpUrl">
                <el-input v-model="formData.httpUrl" placeholder="请输入第三方接口地址" link show-word-limit clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参数类型" prop="paramType">
                <el-select v-model="formData.paramType" placeholder="请选择参数类型" class="full-width-input" clearable>
                  <el-option v-for="(item, index) in paramTypeOptions" :key="index" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formData.interfaceType === 1">
              <el-form-item label="状态节点名称" prop="codeNodeName">
                <el-input v-model="formData.codeNodeName" placeholder="请输入状态节点名称" link show-word-limit clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formData.interfaceType === 1">
              <el-form-item label="接口成功标识" prop="codeSuccessValue">
                <el-input v-model="formData.codeSuccessValue" placeholder="请输入接口成功标识" link show-word-limit clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formData.interfaceType === 1">
              <el-form-item label="数据节点名称" prop="dataNodeName">
                <el-input v-model="formData.dataNodeName" placeholder="请输入数据节点名称" link show-word-limit clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据总条数节点名称" prop="dataTotalName">
                <el-input v-model="formData.dataTotalName" placeholder="请输入数据总条数节点名称" link show-word-limit clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="返回结果数据类型" prop="bodyDataType">
                <el-select v-model="formData.bodyDataType" placeholder="请选择返回结果数据类型" class="full-width-input" clearable>
                  <el-option v-for="(item, index) in bodyDataTypeOptions" :key="index" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参数示例" prop="paramExample">
                <el-input v-model="formData.paramExample" placeholder="请输入参数示例" type="textarea" :rows="2"
                  show-word-limit clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="返回结果示例" prop="bodyExample">
                <el-input v-model="formData.bodyExample" placeholder="请输入返回结果示例" type="textarea" :rows="2"
                  show-word-limit clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="notes">
                <el-input v-model="formData.notes" placeholder="请输入备注" type="textarea" :rows="2" show-word-limit
                  clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="请求参数" name="request">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="paramAdd(1)">新增</el-button>
          </el-col>
        </el-row>
        <el-table :data="formData.requestParamsList" border style="width: 100%" height="30vh">
          <el-table-column type="index" label="序号" width="50" align="center" sortable></el-table-column>
          <el-table-column prop="paramTitle" label="参数标题" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="paramName" label="参数名称" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="paramDataType" label="参数数据类型" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="iparamName" label="接口参数名称" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="iparamDataType" label="接口参数类型" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="defaultValue" label="默认值" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="criteria" label="拼接条件的方式" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="notNullFlag" label="是否必填" width="" show-overflow-tooltip>
            <template #default="scope">
              <span v-if="scope.row.notNullFlag === 1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="">
            <template slot-scope="{ row }">
              <el-button link size="mini" @click="requestEdit(row)">编辑</el-button>
              <el-popconfirm class="button10Left" title="确定要删除吗？" @confirm="() => requestDel(row)">
                <el-button slot="reference" link size="mini" class="danger_button">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="返回数据结构" name="return">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="paramAdd(0)">新增</el-button>
          </el-col>
        </el-row>
        <el-table :data="formData.returnParamsList" border style="width: 100%" height="30vh">
          <el-table-column type="index" label="序号" width="50" align="center" sortable></el-table-column>
          <el-table-column prop="paramTitle" label="参数标题" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="paramName" label="参数名称" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="paramDataType" label="参数数据类型" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="iparamName" label="接口参数名称" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="iparamDataType" label="接口参数类型" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="defaultValue" label="默认值" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="criteria" label="拼接条件的方式" width="" show-overflow-tooltip></el-table-column>
          <el-table-column prop="notNullFlag" label="是否必填" width="" show-overflow-tooltip>
            <template #default="scope">
              <span v-if="scope.row.notNullFlag === 1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="">
            <template slot-scope="{ row }">
              <el-button link size="mini" @click="returnEdit(row)">编辑</el-button>
              <el-popconfirm class="button10Left" title="确定要删除吗？" @confirm="() => returnDel(row)">
                <el-button slot="reference" link size="mini" class="danger_button">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" size="mini">取 消</el-button>
      <el-button type="primary" @click="submitForm" size="mini">确 定</el-button>
    </div>
    <interface-params-dialog ref="interfaceParamsDialog" @edit="editOk" @add="addOk" />
  </el-dialog>
</template>

<script>
import { getInfo, update, copy } from '@/api/sys/interfaces'
import interfaceParamsDialog from './interfaceParamsDialog.vue'
export default {
  name: "interfacesDialog",
  components: { interfaceParamsDialog },
  data() {
    return {
      activeName: 'info',
      type: '',
      dialogTitle: '',
      dialogVisible: false,
      formData: {
        requestParamsList: [],
        returnParamsList: []
      },
      formDisabled: false,
      formRules: {
        interfaceCode: [{ required: true, message: '请输入接口编码', trigger: 'blur' }],
        interfaceName: [{ required: true, message: '请输入接口名称', trigger: 'blur' }],
        httpType: [{ required: true, message: '请选择HTTP协议类型', trigger: 'change' }],
        version: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
      },
      httpTypeOptions: [
        {
          label: 'get',
          value: 'get'
        },
        {
          label: 'post',
          value: 'post'
        },
        // {
        //   label: 'put',
        //   value: 'put'
        // },
        // {
        //   label: 'delete',
        //   value: 'delete'
        // }
      ],
      paramTypeOptions: [
        {
          label: 'json',
          value: 0
        },
        {
          label: 'map',
          value: 1
        }
      ],
      bodyDataTypeOptions: [
        {
          label: '集合',
          value: 0
        },
        {
          label: '对象',
          value: 1
        }
      ],
    }
  },
  methods: {
    edit(row) {
      this.type = 'edit'
      this.dialogTitle = '编辑接口'
      getInfo(row.interfaceId).then(res => {
        if (res.data.code === 200) {
          this.formData = res.data.data
          if (res.data.data.requestParamsList === null) {
            this.formData.requestParamsList = []
          }
          if (res.data.data.returnParamsList === null) {
            this.formData.returnParamsList = []
          }
          this.dialogVisible = true
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        this.$message.error(err)
      })
    },
    copy(row) {
      this.type = 'copy'
      this.dialogTitle = '复制接口'
      getInfo(row.interfaceId).then(res => {
        if (res.data.code === 200) {
          this.formData = res.data.data
          if (res.data.data.requestParamsList === null) {
            this.formData.requestParamsList = []
          }
          if (res.data.data.returnParamsList === null) {
            this.formData.returnParamsList = []
          }
          this.dialogVisible = true
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        this.$message.error(err)
      })
    },
    requestEdit(row) {
      this.$refs.interfaceParamsDialog.edit(row, 1)
    },
    requestDel(row) {
      // 在列表删除
      this.formData.requestParamsList = this.formData.requestParamsList.filter(item => item.paramId !== row.paramId)
    },
    returnEdit(row) {
      this.$refs.interfaceParamsDialog.edit(row, 0)
    },
    returnDel(row) {
      // 在列表删除
      this.formData.returnParamsList = this.formData.returnParamsList.filter(item => item.paramId !== row.paramId)
    },
    submitForm() {
      this.$refs['vForm'].validate((valid) => {
        if (valid) {
          if (this.type === 'edit') {
            update(this.formData).then(res => {
              if (res.data.code === 200) {
                this.$message.success('编辑成功')
                this.closeDialog()
                this.$emit('ok')
              } else {
                this.$message.warning(res.data.message)
              }
            }).catch(err => {
              this.$message.error(err)
            })
          } else if (this.type === 'copy') {
            copy(this.formData).then(res => {
              if (res.data.code === 200) {
                this.$message.success('复制成功')
                this.closeDialog()
                this.$emit('ok')
              } else {
                this.$message.warning(res.data.message)
              }
            }).catch(err => {
              this.$message.error(err)
            })
          }
        }
      })
    },
    paramAdd(type) {
      this.$refs.interfaceParamsDialog.add(type, this.formData.interfaceCode, this.formData.version)
    },
    editOk(record, paramType) {
      if (paramType === 1) {
        this.formData.requestParamsList = this.formData.requestParamsList.map(item => {
          if (item.paramId === record.paramId) {
            return record
          }
          return item
        })
      } else if (paramType === 0) {
        this.formData.returnParamsList = this.formData.returnParamsList.map(item => {
          if (item.paramId === record.paramId) {
            return record
          }
          return item
        })
      }
    },
    addOk(record, paramType) {
      if (paramType === 1) {
        this.formData.requestParamsList.push(record)
      } else if (paramType === 0) {
        this.formData.returnParamsList.push(record)
      }
    },
    closeDialog() {
      this.dialogVisible = false
      this.$refs['vForm'].resetFields()
      this.activeName = 'info'
    },
  }
};
</script>

<style scoped>
.dialog-form {
  padding: 0 30px;
  /* 根据需求调整数值 */
}
</style>
